<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>资料</title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="address=no">
		<link rel="stylesheet" type="text/css" href="css/common.css">
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/center-vip.css">
		<link rel="stylesheet" href="css/user-information.css">
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/hmt.js"></script>
	</head>

	<body>
		<!--header star-->
		<header class="hasManyCity hasManyCitytwo" id="header">
			<a href="center.html" class="fl fanhui"><i class="iconfont icon-fanhui"></i></a>
			<div class="header-tit">
				个人资料
			</div>
		</header>
		<!--header end-->
		<div id="container">
			<div id="main">
				<div class="warp clearfloat">
					<div class="h-top clearfloat box-s">
						<p class="user">王小二</p>
						<div class="vip-time">
							<img src="img/vip00.png" style="width: 42px;" />
							<span id="time">
				    			到期时间:<span>2018-04-18</span>
							</span>
						</div>
					</div>
				</div>

				<!--个人资料区域-->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
					<div class="preview">
						<span style="display: inline-block; line-height: 83px; font-size: 17px;">更改头像</span>
						<img id="imghead" border="0" src="img/10.png" width="60" height="60" onClick="$('#previewImg').click();" style="float: right; margin-top: 3%; margin-right: 3%;">
						<input type="file" onChange="previewImage(this)" style="display: none;" id="previewImg">
					</div>
					</li>
					<li class="mui-table-view-cell">
						<p class="font">昵称</p>
						<input type="text" placeholder="你的昵称" class="input" />
					</li>
					<li class="mui-table-view-cell">
						<p class="font">帐号</p>
						<input type="text" value="5201314" disabled="disabled" class="input" />
					</li>
					<li class="mui-table-view-cell">
						<p class="font">性别</p>
						<input id="sex" type="text" placeholder="男" class="input" value="" />

					</li>
					<li class="mui-table-view-cell">
						<p class="font">手机</p>
						<input type="text" value="138123456789" disabled="disabled" class="input" />
					</li>
					<li class="mui-table-view-cell">
						<p class="font">座机</p>
						<input type="text" placeholder="010-52445255" class="input" />
					</li>
					<li class="mui-table-view-cell">
						<p class="font">邮箱</p>
						<input type="text" placeholder="415258115@163.com" class="input" />
					</li>
					<li class="mui-table-view-cell">
						<p class="font">QQ</p>
						<input type="text" placeholder="415258115@163.com" class="input" />
					</li>
					<li class="mui-table-view-cell">
						<p class="font">微信</p>
						<input type="text" placeholder="415258115@163.com" class="input" />
					</li>
				</ul>

				<!--底部区域-->
				<div class="user-bt0">
					<button class="user-bt1">确定</button>
				</div>
			</div>
		</div>

	</body>

	<script type="text/javascript" src="js/mui.min.js"></script>
	<script type="text/javascript">
		//图片上传预览    IE是用了滤镜。
		function previewImage(file) {
			var MAXWIDTH = 90;
			var MAXHEIGHT = 90;
			var div = document.getElementById('previewImg');
			if(file.files && file.files[0]) {
				div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
				var img = document.getElementById('imghead');
				img.onload = function() {
					var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
					img.width = rect.width;
					img.height = rect.height;
					//                 img.style.marginLeft = rect.left+'px';
					img.style.marginTop = rect.top + 'px';
				}
				var reader = new FileReader();
				reader.onload = function(evt) {
					img.src = evt.target.result;
				}
				reader.readAsDataURL(file.files[0]);
			} else //兼容IE
			{
				var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
				file.select();
				var src = document.selection.createRange().text;
				div.innerHTML = '<img id=imghead>';
				var img = document.getElementById('imghead');
				img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
				var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
				status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width + ',' + rect.height);
				div.innerHTML = "<div id=divhead style='width:" + rect.width + "px;height:" + rect.height + "px;margin-top:" + rect.top + "px;" + sFilter + src + "\"'></div>";
			}
		}

		function clacImgZoomParam(maxWidth, maxHeight, width, height) {
			var param = {
				top: 0,
				left: 0,
				width: width,
				height: height
			};
			if(width > maxWidth || height > maxHeight) {
				rateWidth = width / maxWidth;
				rateHeight = height / maxHeight;

				if(rateWidth > rateHeight) {
					param.width = maxWidth;
					param.height = Math.round(height / rateWidth);
				} else {
					param.width = Math.round(width / rateHeight);
					param.height = maxHeight;
				}
			}
			param.left = Math.round((maxWidth - param.width) / 2);
			param.top = Math.round((maxHeight - param.height) / 2);
			return param;
		}

	</script>

<script>
		doc	ument.addEventListener("plusready", function() {
			// 注册返回按键事件
			plus.key.addEventListener('backbutton', function() {
				// 事件处理
				window.history.back();
			}, false);
		});
	</script>
</html>